<template>
    <div>
        <div class="mg-content">
             <el-row :gutter="20">
                <el-col :span="6">
                     <el-input  v-model="input" size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入名称" :maxlength="20"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-select style="width:100%" v-model="materialType" filterable placeholder="请选择原料类别" size="medium">
                    <el-option
                      v-for="item in materialTypes"
                      :key="item.key"
                      :label="item.text"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                    <div  class="text-left">
                        <el-button type="primary" size="medium" class="btn-info"  icon="el-icon-search" @click="search">搜索</el-button>
                        <el-button type="primary" size="medium"  class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                    </div>
                </el-col>
            </el-row>
          <div class="title-buttons">
            <el-button v-hasPermission="'management_material:create'"  class="title-button btn-primary" size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新建&nbsp;</el-button>
          </div>
          <el-row :gutter="20">
            <el-col :span="4">

              <div class="me_title"  >原料分类</div>
              <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" style="height:400px;overflow-y:auto"
                       :expand-on-click-node="true" :default-expand-all="true" :highlight-current="true"></el-tree>
            </el-col>
            <el-col :span="20">
                <el-table
                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                     </el-table-column>
                    <el-table-column
                            label="原料编号">
                        <template  slot-scope="scope">
                            <span>{{scope.row.no}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="原料名称">
                        <template  slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                  <el-table-column
                    label="类型">
                    <template scope="scope">
                      <span v-if="scope.row.materialType">{{scope.row.materialType.text}}</span>
                    </template>
                  </el-table-column>
                    <!--<el-table-column-->
                            <!--label="物品拼音">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.pinyin}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="物品简码">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.spell}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            label="类别名称">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.category">{{scope.row.category}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="规格型号">
                        <template  slot-scope="scope">
                            <span>{{scope.row.goodsSpec}}</span>
                        </template>
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--label="库存单位">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.unit}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            label="库存预警">
                        <template  slot-scope="scope">
                          <span v-if="scope.row.minStock!=0">{{scope.row.minStock | money}}</span>
                          <span v-else>-----</span>
                          <span v-if="scope.row.maxStock!=0">-{{scope.row.maxStock | money}}</span>
                          <span v-else>-----</span>
                        </template>
                    </el-table-column>
                   <!-- <el-table-column
                            label="最高库存">
                        <template  slot-scope="scope">
                          <span v-if="scope.row.maxStock!=0">{{scope.row.maxStock | money}}</span>
                          <span v-else>-&#45;&#45;&#45;&#45;</span>
                        </template>
                    </el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="储存方式">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.storeMode}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="最新采购单价">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.purchaseNewPrice}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="消耗单位">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.consumeUnit}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="消耗单位换算值">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.consumeRates}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="成本卡标准价">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.orderPriceBom}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="订货类型">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.orderType}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="盘点类型">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.stocktakeType}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="状态">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span>{{scope.row.state}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                     <!--<el-table-column-->
                             <!--label="查看" width="70">-->
                         <!--<template  slot-scope="scope">-->
                             <!--<router-link :to="'/materials/materials/show?id='+scope.row.id">-->
                                 <!--<span class="icon icon-chakanmingxi table-icon"></span>-->
                             <!--</router-link>-->
                         <!--</template>-->
                     <!--</el-table-column>-->
                     <!--<el-table-column
                             label="修改" width="70">
                         <template  slot-scope="scope">
                                <span v-hasPermission="'management_material:update'" class="icon icon-xiugai-copy table-icon" @click="addShow=true;activityId=scope.row.id"></span>
                         </template>
                     </el-table-column>
                     <el-table-column
                              label="删除" width="70">
                          <template  slot-scope="scope">
                            <span  v-hasPermission="'management_material:destory'" class="icon icon-delete table-icon" @click="handleDelete(scope.$index,scope.$index,scope.row.id)"></span>
                          </template>
                     </el-table-column>-->

                  <el-table-column
                    label="操作" width="240">
                    <template slot-scope="scope" >
                      <el-button v-if="scope.row.materialType && scope.row.materialType.key!='PRODUCT'" v-hasPermission="'management_dishes:edit'" type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" >修改 |</el-button>
                      <el-button v-if="scope.row.materialType && scope.row.materialType.key=='PRODUCT'" v-hasPermission="'management_dishes:edit'" type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id;edit=true" >查看 |</el-button>
                      <el-button v-if="scope.row.materialType && scope.row.materialType.key!='PRODUCT'" v-hasPermission="'management_dishes:edit'" type="text" size="small" style="margin: 0px;" @click="handleDelete(scope.$index,scope.$index,scope.row.id)">删除 </el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </el-col>
          </el-row>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" :edit="edit" @close="addClose" @addSuccess="addSuccess"></model>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
    //注意路径
    import model from './model.vue'
    export default{
        data(){
            return {
              defaultProps: {
                children: 'children',
                label:function(data){
                  return "["+data.no+"]"+data.name;
                }
              },
                loading:false,
                tableData: [],
                pageSizes:window.pageSizes,//所有可选择的条数
                pageSize:window.pageSize,//控制一页显示的条数
                total:10,//总条数
                input:"",
                currentPage:1,
                inputValue:"",
                dialogIsShow:false,
                addShow:false,
                activityId:"",
                curDataRow:null,
                curDataIndex:0,
                selectItmeIndex:"",
                selectItemDetailsIndex:"",
                selectDelId:"",
                treeData:[],
              storeId:window.localStorage.getItem("dishKuId"),
              edit:false,
              materialTypes:[],
              materialType:''

            }
        },
        components: {
           model
        },
        created(){
          console.log("*******");
            window.this = this;
            this.initData();
        },
        methods: {
          handleNodeClick(data) {
            var id=data.id;
            var cate="";
            if(id!=0){
              cate=id;
            }else{
              cate="";
            }
            this.loading=true;
            this.$axios.get("materials/materials?search.category.id_eq=" + cate +"&page.pn=1&page.size=" + this.pageSize+"&storeId="+this.storeId+"&search.name_like="+this.inputValue+"&search.materialType_eq="+this.materialType).then((data)=>{
              if(data.status==200){
                this.loading=false
                this.tableData=data.content.materials.content;
                for(var i=0;i<this.tableData.length;i++){
                  if(this.tableData[i].category.name!=null){
                    this.tableData[i].category=this.tableData[i].category.name
                  }
                }
                this.total=data.content.materials.totalElements;
                this.materialTypes = data.content.materialTypes;
                this.loading=false
              }else{
                this.loading=false
              }
            }).catch(function(err){
            })

          },
            initData(){
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.inputValue=this.input;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.inputValue=this.input;
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
          newLabel(newList){
            if(newList){
              for(var i=0;i<newList.length;i++){
                if(newList[i].name.indexOf("S")!=-1){
                  console.log("dg>>>>>>>>>>>>>");
                  newList[i].name = newList[i].name.replace("S","○");
                  newList[i].type = 111;
                }else {
                  newList[i].type = 222;
                }
                newList[i].label="["+newList[i].no+"]"+newList[i].name+"-"+newList[i].type;
                if(newList[i].children){
                  this.newLabel(newList[i].children)
                }
              }
            }
          },
            getData(){
                this.loading=true;
                this.$axios.get("materials/materials?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue+"&search.materialType_eq="+this.materialType+"&storeId="+this.storeId).then((data)=>{
                    this.loading=false
                    this.tableData=data.content.materials.content;
                  var tree=data.content.treeData;
                  this.newLabel(tree);
                  this.treeData=tree;
                  this.materialTypes = data.content.materialTypes;
                  for(var i=0;i<this.tableData.length;i++) {
                    if (this.tableData[i].category.name != null) {
                      this.tableData[i].category = this.tableData[i].category.name
                    }
                  }
                    this.total=data.content.materials.totalElements
                }).catch(function(err){
                 })
            },
            handleDelete(index,delIndex,id) {
                this.selectItmeIndex=index,
                this.selectItemDetailsIndex=delIndex;
                this.selectDelId=id;
                this.dialogIsShow=true;
            },
             dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("materials/materials/"+this.selectDelId).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            addSuccess(item){
                this.addShow=false;
                this.initData();
            },
            addClose(){
                this.addShow=false;
                this.edit=false;
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },
        }
    }
</script>
<style scoped>
  .me_title{
    padding: 10px;
    background-color: #eef1f6;
    border: 1px solid #dfe6ec;
    border-bottom: 0;
    text-align: left;
  }
</style>
